<template>
  <span @click="handleClick">查看公告</span>
  <el-dialog
    v-model="isNoticeShow"
    :close-on-click-modal="false"
    title="查看公告"
    align="center"
    draggable
  >
    <el-card v-for="(item, index) in noticeList" :key="index" @click="handleClose(index)" width=200>
      <template #header>{{ item.time }}</template>
      <span>{{ item.text }}</span>
    </el-card>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { useNoticeStore } from "@/stores/notice";
const { noticeList,removeNotice } = useNoticeStore();
const isNoticeShow = ref(false);

const handleClick = () => {
  isNoticeShow.value = true;
  console.log(noticeList);
  }
  const handleClose = (index) => {
    console.log(index)
    removeNotice(index);
  }
</script>
<style scoped></style>
